<template>
	<template v-if="height">
		<s-table
			rowKey="id"
			:columns="columns"
			:scroll="{ y: height }"
			:pagination="false"
			:data-source="data?.list || []"
			:loading="loading"
		>
			<template #emptyText><c-empty /></template>
		</s-table>
	</template>
</template>

<script setup lang="ts">
const height = computed(() => window.innerHeight - 210)
const columns = [
	{
		title: '姓名',
		dataIndex: 'name',
		rowDrag: true
	},
	{
		title: '性别',
		dataIndex: 'gender'
	},
	{
		title: '年龄',
		dataIndex: 'age'
	},
	{
		title: '身高',
		dataIndex: 'height'
	},
	{
		title: '职业',
		dataIndex: 'job'
	},
	{
		title: '地址',
		dataIndex: 'address',
		width: 300
	},
	{
		title: '出生日',
		dataIndex: 'birth'
	}
]
interface Data {
	list: {
		id: string
		name: string
		gender: string
		age: number
		height: number
		birth: string
		job: string
		address: string
	}[]
}
const { data, loading } = useAxios<Data>({
	method: 'post',
	url: urls.fetchStableList,
	immediate: true
})
</script>
